<template>
  <div>
    <a-row style="margin-bottom: 5px">
      <a-col :span="8">
        <div class="edit-box">
          <div class="current">{{ typeName[approvalType] }}审核</div>
          <div class="edit-font">{{ examineObj.businessApprovalCount }}</div>
        </div>
      </a-col>
      <a-col :span="8">
        <div class="edit-box">
          <div class="current">审核通过</div>
          <div class="edit-font">{{ examineObj.approvalCount }}</div>
        </div>
      </a-col>
      <a-col :span="8">
        <div>
          <div class="current">驳回</div>
          <div class="edit-font">{{ examineObj.rejectCount }}</div>
        </div>
      </a-col>
    </a-row>
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="提审日期">
              <a-range-picker style="width: 100%" showToday valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" v-model="queryParam.regTime" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="审核状态">
              <!-- <a-select v-model="queryParam.approvalStatus" placeholder="请选择">
                <a-select-option v-for="(item, index) in statusList" :key="index" :value="item.key">{{ item.value }}</a-select-option>
              </a-select> -->
              <a-select v-model="queryParam.approvalStatusList" mode="multiple" autoClearSearchValue show-search allowClear placeholder="请选择" :filter-option="filterOption">
                <a-select-option v-for="(item, index) in statusList" :key="index" :value="item.key">{{ item.value }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="品牌">
              <a-select v-model="queryParam.brandList" mode="multiple" autoClearSearchValue show-search allowClear placeholder="请选择" :filter-option="filterOption">
                <a-select-option v-for="(item, index) in brands" :key="index" :value="item.key">{{ item.value }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="素材类型">
              <!-- <a-select v-model="queryParam.themeTypeList" mode="multiple" autoClearSearchValue show-search allowClear placeholder="请选择" :filter-option="filterOption">
                <a-select-option v-for="(item, index) in typeList" :key="index" :value="item.key">{{ item.value }}</a-select-option>
              </a-select> -->
              <a-tree-select
                v-model="queryParam.classifyCodeList"
                style="width: 100%"
                :dropdownStyle="{ maxHeight: '476px' }"
                :tree-data="classifyList"
                tree-checkable
                allowClear
                placeholder="请选择"
                search-placeholder="Please select"
              />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="上传区域">
              <a-tree-select
                v-model="queryParam.areaList"
                style="width: 100%"
                :dropdownStyle="{ maxHeight: '476px' }"
                :tree-data="areaList"
                tree-checkable
                allowClear
                placeholder="请选择区域"
                search-placeholder="Please select"
              />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="创建者确认">
              <a-select v-model="queryParam.creatorStatusList" mode="multiple" autoClearSearchValue show-search allowClear placeholder="请选择" :filter-option="filterOption">
                <a-select-option v-for="(item, index) in creatorStatusList" :key="index" :value="item.key">{{ item.value }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <!-- </a-row> -->
          <!-- <a-row :gutter="48"> -->
          <a-col :md="8" :sm="24">
            <a-form-item label="易盾人审">
              <a-select v-model="queryParam.yidunManualList" mode="multiple" autoClearSearchValue show-search allowClear placeholder="请选择" :filter-option="filterOption" style="width: 100%">
                <a-select-option v-for="(item, index) in yidunManualList" :key="index" :value="item.key">{{ item.value }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="搜索类型" style="display: flex">
              <div style="display: flex">
                <a-select v-model="queryParam.searchType" placeholder="请选择" style="width: 130px">
                  <a-select-option v-for="(item, index) in searchTypeList" :key="index" :value="item.key">{{ item.value }}</a-select-option>
                </a-select>
                <a-input v-model="queryParam.searchValue" placeholder="请输入" style="margin-left: 5px" />
              </div>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="48">
          <a-col :md="24" :sm="24">
            <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' }">
              <a-button type="primary" @click="search">查询</a-button>
              <a-button style="margin-left: 8px" @click="reset">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-table style="margin-bottom: 32px" :rowKey="(record, index) => index" :columns="columns" :dataSource="tableData" :pagination="pagination" :show-header="false" @change="handleTableChange">
      <span slot="goods" slot-scope="text, record">
        <div v-if="record.status == 100 || record.status == 101" style="width: 100%; font-weight: 600" :class="record.status == 100 ? 'noConfirm' : 'hasConfirm'">
          <template>{{ record.creatorStatusName }}</template>
        </div>
        <div style="display: flex">
          <img slot="cover" :src="record.themeVideoInfo.coverUrl" class="img" v-if="record.themeVideoInfo && record.themeVideoInfo.coverUrl" />
          <img slot="cover" :src="record.imgUrls[0]" class="img" v-else />
          <div style="margin-left: 16px; flex: 1; max-width: 400px">
            <div style="display: flex; max-width: 90%">
              <div class="edit-fo">{{ record.themeName }}</div>
              <div style="margin-right: 40px; flex: 1; text-align: right" class="edit-fo">{{ record.code }}</div>
            </div>
            <div class="current_style">{{ record.themeremark }}</div>
          </div>
        </div>
      </span>
      <span slot="status" slot-scope="text, record">
        <div class="edit-fo">{{ record.statusName }}</div>
      </span>
      <span slot="workNo" slot-scope="text, record">
        <div>{{ record.empName }}&nbsp;&nbsp;&nbsp;&nbsp;{{ record.workNo }}</div>
        <div>{{ record.storeName }}</div>
      </span>
      <span slot="themeTypeName" slot-scope="text, record">
        <div>{{ record.themeTypeName }}</div>
        <div class="current_style">{{ record.themeBrandName }}</div>
      </span>
      <span slot="time" slot-scope="text, record">
        <div>提审时间</div>
        {{ record.createTime }}
      </span>
      <span slot="yidunManualName" slot-scope="text, record">
        <div style="text-align: center">易盾人审</div>
        <div style="text-align: center; color: #70b603" v-if="record.yidunManual == 1">{{ record.yidunManualName }}</div>
        <div style="text-align: center; color: #d9001b" v-else-if="record.yidunManual == 2">{{ record.yidunManualName }}</div>
        <div style="text-align: center; color: #7f7f7f" v-else>{{ record.yidunManualName }}</div>
      </span>
      <span slot="action" slot-scope="text, record">
        <router-link :to="`/pos+/material/components/publicDetail/${record.id}/${approvalType}?blank=blank`" target="_blank" v-if="record.operator == 'viewDetail'">查看</router-link>
        <router-link :to="`/pos+/material/components/publicDetail/${record.id}/${approvalType}?blank=blank`" target="_blank" v-if="record.operator == 'approval'">开始审核</router-link>
      </span>
    </a-table>
    <!-- <a-modal v-model="visible" @ok="handleOk">
      <a-cascader v-model="typeList" :options="options" placeholder="请选择" />
    </a-modal> -->
  </div>
</template>
<script>
import ListInfo from '@views/box/components/goodsInfo/listInfo'
import { condition, conditionList, countNum } from '@/api/pos'
import { themeClassify2, areaList } from '@/api/pos/authority'
const columns = [
  { title: '素材名', dataIndex: 'goods', scopedSlots: { customRender: 'goods' }, width: '400px' },
  { title: '创建人', dataIndex: 'workNo', scopedSlots: { customRender: 'workNo' }, width: '20%' },
  { title: '素材类型', dataIndex: 'themeTypeName', scopedSlots: { customRender: 'themeTypeName' }, width: '10%' },
  { title: '提审时间', dataIndex: 'createTime', scopedSlots: { customRender: 'time' }, width: '15%' },
  { title: '易盾人审', dataIndex: 'yidunManualName', scopedSlots: { customRender: 'yidunManualName' }, width: '10%' },
  { title: '投稿状态', dataIndex: 'status', scopedSlots: { customRender: 'status' }, width: '10%' },
  {
    title: '操作',
    width: '10%',
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    ListInfo
  },
  props: {
    noteId: {
      type: Number,
      default: ''
    }
  },
  data() {
    return {
      columns,
      typeName: {
        6: '业务',
        7: '品牌',
        8: '公关',
        9: '法务'
      },
      examineObj: {
        businessApprovalCount: 0,
        approvalCount: 0,
        rejectCount: 0
      },
      approvalType: '',
      queryParam: {
        regTime: [],
        brandList: [],
        themeTypeList: [],
        // approvalStatus: this.noteId.toString(),
        approvalStatusList: [this.noteId.toString()],
        searchType: 'code',
        searchValue: '',
        noteId: this.noteId,
        currentNote: 0,
        current: 1,
        size: 10,
        loginWorkNo: this.$store.getters.userInfo.workNo,
        creatorStatusList: [],
        yidunManualList: []
      },
      statusList: [],
      // typeList: [],
      classifyList: [], // 素材类型
      brands: [], // 品牌
      searchTypeList: [], //搜索
      tableData: [],
      pagination: {
        total: 0,
        pageSize: 10,
        page: 1,
        current: 1,
        showTotal: total => `共有 ${total} 条数据`
      },
      visible: false,
      manufacturerList: [],
      distributionList: [],
      areaList: [],
      creatorStatusList: [], // 创建者状态
      yidunManualList: [] // 易盾人审
    }
  },

  mounted() {
    this.postThemeClassify()
    this.postCondition()
    this.conditionList()
    this.postCountNum()
    this.manufacturer()
    this.distribution()
    this.approvalType = JSON.stringify(JSON.parse(this.noteId.toString()))
    if (this.approvalType == 9) {
      this.queryParam.yidunManualList = ['1', '2']
    }
  },
  watch: {
    $route(to, from) {
      let detailName = 'pos+-material-relation-index'

      // this.postCondition()
      // this.conditionList()
      // this.postCountNum()
      console.log(to, 'to')
      console.log(from, 'from')
    }
  },
  methods: {
    // 获取 直营区域
    manufacturer() {
      let data = { departType: 'Z' }
      areaList(data).then(res => {
        if (res.code === 200) {
          this.manufacturerList = res.data
          this.formatStore()
        }
      })
    },
    // 获取经销区域
    distribution() {
      let data = { departType: 'J' }
      areaList(data).then(res => {
        if (res.code === 200) {
          this.distributionList = res.data
          this.formatStore()
        }
      })
    },
    //
    handleOk() {},
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    // 审核数量
    postCountNum() {
      let data = {
        noteId: this.noteId,
        loginWorkNo: this.$store.getters.userInfo.workNo
      }
      countNum(data).then(res => {
        if (res.code == 200) {
          this.examineObj.businessApprovalCount = res.data.businessApprovalCount
          this.examineObj.approvalCount = res.data.approvalCount
          this.examineObj.rejectCount = res.data.rejectCount
        }
      })
    },
    postCondition() {
      condition().then(res => {
        if (res.code == 200) {
          this.statusList = res.data.approvalStatusList // 审核状态
          this.brands = res.data.brandList // 品牌
          // this.typeList = res.data.themeTypeList // 素材类型
          this.searchTypeList = res.data.searchTypeList // 搜索类型
          this.creatorStatusList = res.data.creatorStatusList // 创建者状态
          this.yidunManualList = res.data.yidunManualList // 易盾人审
        }
      })
    },
    conditionList(arg) {
      if (arg === 1) {
        this.queryParam.current = 1
        this.pagination.current = 1
      }
      let searchParam = this.queryParam
      if (searchParam.areaList) {
        searchParam.putAreaList = searchParam.areaList.map(item => {
          return item.slice(0, -4)
        })
      }
      const queryParam = JSON.parse(JSON.stringify(searchParam))
      const data = {}
      data.requestData = queryParam
      if (queryParam.regTime && queryParam.regTime.length > 0) {
        data.requestData.startDate = queryParam.regTime[0]
        data.requestData.endDate = queryParam.regTime[1]
      } else {
        data.requestData.startDate = ''
        data.requestData.endDate = ''
      }
      delete queryParam.areaList
      delete queryParam.regTime
      conditionList(data.requestData).then(res => {
        if (res.code == 200) {
          const pagination = { ...this.pagination }
          pagination.pageSize = res.data.size
          pagination.total = res.data.total
          this.pagination = pagination
          this.tableData = res.data.records
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    },
    handleTableChange(pagination) {
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.queryParam.current = pagination.current
      this.queryParam.size = pagination.pageSize
      this.conditionList()
    },
    // 搜索
    search() {
      this.conditionList(1)
    },
    // 重置
    reset() {
      this.queryParam = {
        regTime: [],
        brandList: [],
        themeTypeList: [],
        // approvalStatus: this.noteId.toString(),
        approvalStatusList: [this.noteId.toString()],
        // approvalType: JSON.stringify(this.noteId.toString()),
        searchType: 'code',
        searchValue: '',
        noteId: this.noteId,
        currentNote: 0,
        current: 1,
        size: 10,
        loginWorkNo: this.$store.getters.userInfo.workNo,
        creatorStatusList: [],
        yidunManualList: []
      }
      if (this.approvalType == 9) {
        this.queryParam.yidunManualList = ['1', '2']
      }
      this.pagination.current = 1
      this.conditionList()
    },
    // 素材类型
    postThemeClassify() {
      themeClassify2().then(res => {
        if (res.code == 200) {
          let list = res.data.map(item => {
            let li = {
              title: item.name,
              value: item.code,
              key: item.code,
              children: item.childList.map(item2 => {
                return {
                  title: item2.name,
                  value: item2.code,
                  key: item2.code,
                  children: item2.childList.map(item3 => {
                    return {
                      title: item3.name,
                      value: item3.code,
                      key: item3.code
                    }
                  })
                }
              })
            }
            return li
          })
          this.classifyList = list
        } else {
          this.$message.error(res.msg || res.message)
        }
      })
    },
    // 格式化 区域
    formatStore() {
      let manufacturerList = this.manufacturerList.map(item => {
        let storeItem = {
          title: item.name,
          value: item.id + '1156',
          key: item.id + '1156',
          id: item.id
        }
        return storeItem
      })
      let distributionList = this.distributionList.map(item => {
        let storeItem = {
          title: item.name,
          value: item.id + '1256',
          key: item.id + '1256',
          id: item.id
        }
        return storeItem
      })
      let treeData = [
        {
          title: '直营',
          value: '1156',
          key: '1156',
          children: manufacturerList
        },
        {
          title: '经销',
          value: '1256',
          key: '1256',
          children: distributionList
        }
      ]
      this.areaList = treeData
    }
  }
}
</script>
<style lang="less" scoped>
.img {
  width: 50px;
  height: 50px;
}
.edit-fo {
  color: #000;
}
/deep/ .ant-col-8 {
  text-align: center;
  height: 100px;
  padding-top: 12px;
}
.current {
  color: #00000072;
  margin-bottom: 6px;
}
.edit-font {
  font-size: 24px;
  color: #333333;
}
.edit-box {
  border-right: 1px solid #ccc;
}
.current_style {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 90%;
}
.noConfirm {
  color: rgba(245, 154, 35, 0.847058823529412);
}
.hasConfirm {
  color: rgba(112, 182, 3, 0.847058823529412);
}
</style>